﻿{extend name="public:base" /}

{block name="css"}
<link href="/static/laydate/theme/default/laydate.css">{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>姓名</th>
                                <th>手机号</th>
                                <th>注册时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            {volist name="list" id="vo"}
                            <tr>
                                <td>{$vo.id}</td>
                                <td>{$vo.username ? $vo.username : $vo.nickname}</td>
                                <td>{$vo.mobile}</td>
                                <td>{$vo.create_time|timeFormat}</td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                        {if !empty($list)}{$list->render()}{/if}
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>


<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">排序</h4>
            </div>
            <div class="modal-body">
                <div id="list" style="max-height: 450px; overflow-y: auto">
                    {volist name="sort_list" id="vo"}
                    <div data-id="{$vo.id}">{$vo.nickname} / {$vo.username} / {$vo.mobile}</div>
                    {/volist}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveSort()">更新排序</button>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script src="__ADMIN__/js/Sortable.js"></script>
<script src="/static/laydate/laydate.js"></script>
<script>
    laydate.render({
        elem: '.screen-date' //指定元素
    });
</script>
<script>
    var region_list = {$region_list_json};
    var city_list;

    $(function () {
        var province = "{$province}";
        var city = "{$city}";
        var area = "{$area}";

        if (province) {
            for (let i in region_list) {
                if (province == region_list[i].name) {
                    city_list = region_list[i].city_list;
                    break;
                }
            }
            renderOption(city_list, 'city', city);
        }
        if (city) {
            for (let i in city_list) {
                if (city == city_list[i].name) {
                    area_list = city_list[i].area_list;
                    break;
                }
            }
            renderOption(area_list, 'area', area);
        }
    })

    $('.province').change(function () {
        var name = $(this).val();
        if(name != 0){
            for (let i in region_list) {
                if (name == region_list[i].name) {
                    city_list = region_list[i].city_list;
                    break;
                }
            }

            renderOption(city_list, 'city');
        }else{
            $('.city').html('<option value="0">请选择</option>');
            $('.area').html('<option value="0">请选择</option>');
        }
    })

    $('.city').change(function () {
        var name = $(this).val();

        if(name != 0){
            for (let i in city_list) {
                if (name == city_list[i].name) {
                    var area_list = city_list[i].area_list;
                    break;
                }
            }
            renderOption(area_list, 'area');
        }else{
            $('.area').html('<option value="0">请选择</option>');
        }
    })

    function renderOption(region_list, class_name, name = '') {
        if(class_name == 'city'){
            $('.city').html('<option value="0">请选择</option>');
            $('.area').html('<option value="0">请选择</option>');
        }

        var option = '<option value="0">请选择</option>';
        var selected = '';
        for (let i in region_list) {
            selected = name == region_list[i].name ? 'selected' : '';
            option += '<option ' + selected + ' value="' + region_list[i].name + '">' + region_list[i].name + '</option>';
        }
        $('.' + class_name).html(option);
    }

</script>
<script>
    (function () {
        //文字拖拽
        Sortable.create(document.getElementById('list'), {
            animation: 150,
            //onAdd,onUpdate,onRemove,onStart,onSort,onEnd
            onUpdate: function (evt){
                var oldIndex = evt.oldIndex;
                var newIndex = evt.newIndex;
                console.log(oldIndex);
                console.log(newIndex)
            }
        });
    })();

    /**
     * 更新排序
     * */
    function saveSort()
    {
        var divObj = $('#list > div');
        if(divObj.length > 0){
            var sortObj = [];
            divObj.each(function (index, val){
                var id = val.dataset.id;

                var sortObjSingle = {};
                sortObjSingle.id = id;
                sortObjSingle.sort = index;
                sortObj[index] = sortObjSingle;
            })
            var url = "/admin/manage/saveUserSort";

            $.post(url, {
                sortObj: JSON.stringify(sortObj)
            }, function (res){
                if(res.result == 1){
                    layer.msg(res.msg);
                    setTimeout(function (){
                        window.location.reload();
                    },res.timer)
                }else{
                    layer.msg(res.msg)
                }
            },'json')
        }
    }
</script>
{/block}
